<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动轮播</title>
    <style>
        *{margin: 0px;padding: 0px}
        #slide{
           width: 400px;height: 200px;
            border: 1px solid red;margin: 100px auto;
            position: relative;
        }
        #slide ul li{
            list-style: none;height: 200px;line-height: 200px;
            color: #ffffff;font-size: 50px;text-align: center;
            display: none;background:purple ;
        }
        #slide ul li.active{
            display: block;
        }
        #radius{
            position: absolute;
            bottom: 0px;
            left: 50%;margin-left: -60px;
        }
        #radius p{
            width: 20px;height: 20px;background: #55a532;
            float: left;border-radius: 10px;margin: 0px 5px;
        }
        #radius p.active{
            background: red;
        }
        #prev,#next{
            width: 40px;height: 50px;background: rgba(0,0,0,.5);cursor: pointer;
            border: 1px solid rgba(0,0,0,.5);color: white;line-height: 50px;
            position: absolute;top: 75px;font-size: 30px;text-align: center;
            display: none;
        }
        #prev{left: 0px}
        #next{right: 0px}

    </style>
</head>
<body>
    <div id="slide">
        <ul id="box">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div id="radius">
            <p class="active"></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <button id="prev">&lt;</button>
        <button id="next">&gt;</button>
    </div>

    <script type="text/javascript">
        //每隔1500毫秒更换一次内容
        //定义变量保存
        var n = 0;
        //获取最外层大框
        var slide = document.getElementById("slide");
        //获取li
        var box = document.getElementById("box");
        var liArr = box.getElementsByTagName("li");
        //获取p
        var radius = document.getElementById("radius");
        var pArr = radius.getElementsByTagName("p");
        //获取next,perv
        var next = document.getElementById("next");
        var prev = document.getElementById("prev");

        //为slide注册事件
        slide.onmouseover = function () {
            clearInterval(timer);//鼠标移入的时候，停止轮播
            next.style.display = "block";
            prev.style.display = "block";
        }
        slide.onmouseout = function () {
            timer = setInterval(slideDown,1500);
            next.style.display = "none";
            prev.style.display = "none";
        }

        //点击next向下运动(函数名就好，不要加括号)
        next.onclick = slideDown;
        //点击prev向下运动(函数名就好，不要加括号)
        prev.onclick = slideUp;

        //这里需要重点看！！！
        //给每个p标签注册事件(点小圆圈，图片也能轮播)
        for(var a=0;a<pArr.length;a++){
            //建立对应关系
            pArr[a].b = a;
            pArr[a].onclick = function () {
                //解决点击后移出的bug
                n = this.b;
                //先清楚所有显示的内容
                for(var i=0;i<liArr.length;i++){
                    liArr[i].className = "";
                    pArr[i].className = "";
                }
                //再显示当前的内容
                liArr[this.b].className = "active";
                pArr[this.b].className = "active";

            }
        }




        //定义计时器
        var timer = setInterval(slideDown,1500);

        //定义向下运动
        function slideDown () {
            //通过n来变换内容
            n++;
            if(n==liArr.length){
                n=0;
            }
            //先清楚所有显示的内容
            for(var i=0;i<liArr.length;i++){
                liArr[i].className = "";
                pArr[i].className = "";
            }
            //再显示当前的内容
            liArr[n].className = "active";
            pArr[n].className = "active";
        }
        //定义向上运动
        function slideUp () {
            //通过n来变换内容
            n--;
            if(n<0){
                n=liArr.length-1;
            }
            //先清楚所有显示的内容
            for(var i=0;i<liArr.length;i++){
                liArr[i].className = "";
                pArr[i].className = "";
            }
            //再显示当前的内容
            liArr[n].className = "active";
            pArr[n].className = "active";

        }





    </script>

</body>
</html>